<!--
 * @Author: your name
 * @Date: 2021-08-22 13:57:55
 * @LastEditTime: 2021-08-22 14:15:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /web-blog/src/components/contentRight/contentRight.vue
-->

<template>
  <div class="rightBox">
    <a-card title="分类" class="box-card">
      <a slot="extra" href="#">more</a>
      <a-tag color="cyan" class="tag">前端技术</a-tag>
      <a-tag color="cyan" class="tag">前端技术</a-tag>
      <a-tag color="cyan" class="tag">前端技术</a-tag>
      <a-tag color="cyan" class="tag">前端技术</a-tag>
    </a-card>
    <!-- 标签 -->
    <a-card title="标签" class="box-card label">
      <a slot="extra" href="#">more</a>
      <a-tag color="green" class="tag">前端技术</a-tag>
      <a-tag color="green" class="tag">node.js</a-tag>
      <a-tag color="green" class="tag">服务器</a-tag>
      <a-tag color="green" class="tag">服务器</a-tag>
    </a-card>
    <!-- 最新推荐 -->
    <a-card title="最新推荐" class="box-card label">
      <a slot="extra" href="#">more</a>
        <a>
          如何获取源码地址？入站有什么注意事项？进来便知！
        </a>
    <a-divider dashed />
    </a-card>
    <!-- 微信关注号和小程序 -->
    <a-divider class="divider">
      关注公众号、加交流群
    </a-divider>

    <a-card class="QRcodecard applet">
      <img src="../../assets/img/WechatIMG3.jpeg" class="QRcodeImg leftImg"/>
      <img src="../../assets/img/WechatIMG3.jpeg" class="QRcodeImg"/>
    </a-card>

  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
  .rightBox {
    margin-left: -350px;
    margin-top: -60px;
  }

  .box-card {
    width: 260px;
    height: 300px;
    border-radius: 15px;
  }

  /deep/ .ant-card-head {
    background: #DCDCDC;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
  }

  .label {
    margin-top: 36px;
  }
  
  .QRcodecard {
    border-radius: 15px;
    width: 260px;
    height: 150px;
  }

  .QRcodeImg {
    width: 80px;
    height: 80px;
  }

  .leftImg {
    margin-right: 50px;
  }
  
  .applet {
    display: flex;
    margin-bottom: 30px;
    border-radius: 15px;
  }

  .tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  /deep/.ant-divider-horizontal {
    margin: 10px 0 !important;
  }

  .divider {
    padding-right: 745px;
  }

</style>

